<template>
  <div class="person">
    <h2>一辆{{car.brand}},价格{{car.price}}W</h2>
    <button @click="changePrice">changePrice</button>
    <br>
    <h2>游戏列表</h2>
    <ul>
      <li v-for="game in games" v-bind:key="game.id">
        {{game.name}}
      </li>
      <button @click="changeName">修改第一个游戏名</button>
    </ul>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',

}
</script>

<script lang="ts" setup>
//import {ref} from 'vue'
import {reactive} from 'vue'
let car = reactive({brand:'奔驰',price:100})
let games =reactive([
  {id:'01',name:'王者荣耀'},
  {id:'02',name:'三国志'},
  {id:'03',name:'原神'}
])

console.log(car)

function changePrice(){
  car.price += 10
}
function changeName(){
  games[0].name = '流星蝴蝶剑'
}
</script>

<style>
.person {
  background-color: lightblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
li{
  font-size: 20px;
}
</style>